﻿<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
            background: #000;
        }
        
        #canvas {
            display: block;
            /*background: #FFF;*/
        }
    </style>
    <metacharset="utf-8">
        <title>Raining</title>
        <script>
            let canvas, ctx, w, h;
            let rains = [];
            let count = 30;
            window.onload = function() {
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                w = canvas.width = window.innerWidth;
                h = canvas.height = window.innerHeight;
                window.onresize = function() {
                    w = canvas.width = window.innerWidth;
                    h = canvas.height = window.innerHeight;
                }

                for (let i = 0; i < count; i++) {
                    setTimeout(function() {
                        let r = new Rain();
                        r.init();
                        r.draw();
                        rains.push(r);
                    }, i * 300);
                }
                flush();

            }

            function Rain() {}
            Rain.prototype = {
                init: function() {
                    this.x = randomCustom(0, w);
                    this.y = 0;
                    this.vy = randomCustom(4, 5);
                    this.l = randomCustom(0.8 * h, 0.9 * h);
                    this.r = 1;
                    this.vr = randomCustom(0.5, 0.9);
                    this.a = 1;
                    this.va = 0.96;
                },
                draw: function() {
                    if (this.y < this.l) {
                        ctx.fillStyle = "rgb(0, 255, 255)";
                        ctx.fillRect(this.x, this.y, 3, 6);
                    } else {
                        ctx.strokeStyle = "rgba(0, 255, 255, " + this.a + ")";
                        ctx.beginPath();
                        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                        ctx.stroke();
                    }
                    this.update();
                },
                update: function() {
                    if (this.y < this.l) {
                        this.y += this.vy;
                    } else {
                        if (this.a > 0.03) {
                            this.r += this.vr;
                            if (this.r > 50) {
                                this.a *= this.va;
                            }
                        } else {
                            this.init();
                        }
                    }
                }
            }

            function flush() {
                ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
                ctx.fillRect(0, 0, w, h);
                for (let i = 0; i < count; i++) {
                    if (rains[i] !== undefined) {
                        rains[i].draw();
                    }
                }
                requestAnimationFrame(flush);
            }

            function randomCustom(min, max) {
                return Math.random() * (max - min) + min;
            }
        </script>
</head>

<body>
    <canvas id="canvas">你的浏览器不支持canvas标签。</canvas>

</body>

</html>